﻿*{
		font-family: '微软雅黑';
		-webkit-user-select:none;
        user-select:none;
	}
	
	h1,h2{
		color: #1BCAEF;
		margin: 0;
		text-shadow: 1px 1px 3px #3A554E;
	}
	h3{
		color: rgba(10,0,0,.4);
	}
	body{
		display: flex;
		justify-content: center;
	}
	#head{
		position: relative;
		width: 500px;
		height: 500px;
		overflow: hidden;
		border: 1px solid rgb(200,200,200);
                box-shadow: 1px 1px 10px rgb(38,33,33);
	}
	#info{
		width: 100px;
		height: 500px;
		position: relative;
		border-radius: 0 10px 10px 0;
                box-shadow: 1px 1px 10px rgb(38,33,33);
		overflow: hidden;
	}
	#info_in{
		width: 100px;
		height: 500px;
		background: #D5D5D5;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-left: 10px;
		position: absolute;
		left: -110px;
		top: 0;
		transition: left .4s;
	}
	#first{
		left: 0;
		top: 0;
		z-index: 2;
		width: 500px;
		height: 500px;
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: left .7s;
	}
	
	input{
		margin-top: 20px;
		font-weight: bold;
		color: white;
		outline: none;
		border: none;
		background: #D4D99C;
		opacity: .7;
		padding: 5px 30px;
		border-radius: 5px;
		cursor: pointer;
		transition: all .4s;
	}
	input:hover{
		background: #1BCAEF;
	}
	#second{
		width: 500px;
		height: 500px;
		position: absolute;
		left: 500px;
		top: 0;
		background: rgba(18,18,18,.8);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: left .4s;
	}
	#second h1{
		word-spacing: 30px;
	}
	#third{
		width: 500px;
		height: 500px;
		position: absolute;
		left: 500px;
		top: 0;
		transition: left .4s;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(18,18,18,.8);
	}
	#third_lose{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(200,200,200,.4);
		padding: 30px;
		border-radius: 5px;
	}
	#third_lose p{
		color: #1BCAEF;
	}
	#forth td{
		width: 10px;
		height: 10px;
	}
	#count_down{
		width: 500px;
		height: 500px;
		position: absolute;
		left: 500px;
		top: 0;
		background: rgba(180,180,180,.4);
		font-size: 4em;
		transition: left .4s;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#new_two{
		width: 500px;
		height: 500px;
		position: absolute;
		top: 0;
		left: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: left .6s;
	}
	#nav_{
		display: flex;
		justify-content: space-around;
		align-items: center;
		transition: top .6s;
		position: absolute;
		width: 500px;
		height: 500px;
		left: 0;
		top: -500px;
		z-index: 3;
	}
	#nav_1{
			display: flex;
			flex-direction: column;
	}
	#nav_ input{
		    font-size: 1em;
			color: rgba(86,110,139,.2);
			padding: 60px;
			background: rgba(185,203,155,0.05);
	}
	/*
	@media only screen and (max-width: 800px){
		#nav_{
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}*/